import React from 'react'

export class LoginControl extends React.Component {
    constructor(props) {
        super(props)
        this.handleLoginClick = this.handleLoginClick.bind(this)
        this.handleLogoutClick = this.handleLogoutClick.bind(this)
        this.state = { isLoggedIn: false }
    }

    handleLoginClick() {
        this.setState({ isLoggedIn: true })
    }

    handleLogoutClick() {
        this.setState({ isLoggedIn: false })
    }

    render() {
        const isLoggedIn = this.state.isLoggedIn
        let button
        if (isLoggedIn) {
            button = <LogoutButton onClick={this.handleLogoutClick} />
        } else {
            button = <LoginButton onClick={this.handleLoginClick} />
        }
        return (
            <div>
                {true && <Greeting isLoggedIn={isLoggedIn} />}
                {button}
                <NumberList numbers={[1, 2, 3, 4, 5]} />
            </div>
        )
    }
}

function LoginButton(props) {
    return <button onClick={props.onClick}>Login</button>
}

function LogoutButton(props) {
    return <button onClick={props.onClick}>Logout</button>
}

function UserGreeting(props) {
    return <span>Welcome back!</span>
}

function GuestGreeting(props) {
    return <span>Please sign up.</span>
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn
    if (isLoggedIn) {
        return <UserGreeting />
    }
    return <GuestGreeting />
}

function NumberList(props) {
    const numbers = props.numbers
    const listItems = numbers.map(number => (
        <li key={`key${number}`}>{number * 100}</li>
    ))
    // numbers.forEach(value => {
    //     listItems.push(<li key={`key_${value}`}>{value * 1000}</li>)
    // })
    console.log('===>>>', listItems)

    return <ul>{listItems}</ul>
}
